<script setup>
import {defineEmits, reactive, ref} from "vue";
import request from "@/utils/request";
import {useUserStore} from "@/stores/user";
const name = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const userStore = useUserStore()
const token = userStore.getBearerToken

const state = reactive({
  tableData: []
})

let $myEmit = defineEmits(['getUnread'])
const load = () => {
  request.get('/messages/page', {
    params: {
      name: name.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
  }).then(res => {
    state.tableData = res.data.records
    total.value = res.data.total
    $myEmit('getUnread')  // 发送从新获取未读消息 并更新数字的指令
  })
}
load()
request.put('/messages/read')  // 发起请求
</script>

<template>
  <div style="padding: 25px 25px;">

      <div style="margin: 10px 0">
        <el-table :data="state.tableData" stripe :show-header="false">

          <el-table-column label="内容">
            <template #default="scope">
              <div v-html="scope.row.content"></div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="通知时间"></el-table-column>
        </el-table>
      </div>

      <div style="margin: 20px 0">
        <el-pagination
            @current-change="load"
            @size-change="load"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            background
            :page-sizes="[5, 10, 20]"
            layout="total, prev, pager, next"
            :total="total"
        />
      </div>

  </div>

</template>